<template>
  <div>
    <ReturnCloseNavbar right_close />
    <div class="title">账号登录</div>
    <div class="form">
      <van-form validate-first
                @submit="onSubmit"
                @failed="onFailed">
        <van-field v-model="number"
                   name="number"
                   placeholder="手机号"
                   maxlength="11"
                   type="digit"
                   clearable
                   error-message-align="right"
                   :rules="[
						{ required: true, message: '请填写手机号' },
						{ validator: validatorPatternNumber, message: '手机号格式错误' },
					]" />
        <van-field v-model="password"
                   :type="password_eye"
                   name="password"
                   placeholder="密码"
                   maxlength="20"
                   error-message-align="right"
                   clearable
                   :rules="[
						{ required: true, message: '请填写密码' },
						{ validator: validatorPatternPassword, message: '密码格式错误' },
					]">
          <template #button>
            <span @click="getPasswordVisible">
              <van-icon name="closed-eye"
                        v-if="is_password_visible" />
              <van-icon name="eye-o"
                        v-else />
            </span>
          </template>
        </van-field>
        <div class="submit-button">
          <van-button round
                      block
                      type="default"
                      native-type="submit">登录</van-button>
        </div>
      </van-form>
      <div class="bottom-info">
        <van-cell title="单元格"
                  value="内容">
          <template #title>
            <span class="font-size-14"
                  style="color: #333333"
                  @click="goForgetPassword">忘记密码</span>
          </template>
          <template #default>
            <span class="font-size-14"
                  style="color: #333333">新用户</span>
            <span class="font-size-14"
                  style="color: #eb493f"
                  @click="goRegister">注册</span>
          </template>
        </van-cell>
      </div>
      <div class="bottom-agreement"
           v-show="agreement_show_flag">
        <agreement @checked="agreement_flag = !agreement_flag" />
      </div>
    </div>
  </div>
</template>

<script>
import Agreement from './components/Agreement';
import ReturnCloseNavbar from './components/ReturnCloseNavbar';
import md5 from 'js-md5';
import cookie from '@/utils/cookie';
export default {
	name: 'index',
	data() {
		return {
			agreement_flag: false, //协议标识
			number: '', //手机号
			password: '', //密码
			is_password_visible: true, //密码可见标识
			password_eye: 'password', //input框type状态
			pattern_number: /^[1]([3-9])[0-9]{9}$/, //手机号正则
			pattern_password: /^\w{6,15}$/, //密码正则
			window_default_height: '0', //默认屏幕高度
			window_actual_height: 0, //实时屏幕高度
			agreement_show_flag: true, //协议展示标识
		};
	},
	components: {
		Agreement,
		ReturnCloseNavbar,
	},
	watch: {
		window_actual_height() {
			//监听实时屏幕高度
			if (this.window_default_height !== this.window_actual_height) {
				this.agreement_show_flag = false;
			} else {
				this.agreement_show_flag = true;
			}
		},
	},
	mounted() {
		this.window_default_height = document.body.clientHeight;
		window.onresize = () => {
			//实时获取屏幕改变高度
			return (() => {
				this.window_actual_height = document.body.clientHeight;
			})();
		};
	},
	methods: {
		onSubmit(values) {
			//提交登录
			if (!this.agreement_flag) {
				this.$toast.fail('需勾选用户协议');
				return;
			}
			_api
				.api_userPortal_login({
					phone: values.number,
					password: md5(values.password),
				})
				.then((data) => {
					this.$toast.success('登录成功');
					localStorage.setItem('token', data.data.token);
					this.$router.push({ path: '/', query: { town_id: cookie.get('town_id') || 14 } });
					cookie.set('userLogin', JSON.stringify(data.data));
				})
				.catch((error) => {
					console.log(JSON.stringify(error));
					this.$toast.fail(error.msg);
				});
		},
		onFailed(errorInfo) {
			console.log('failed', errorInfo);
		},
		validatorPatternNumber(val) {
			//手机号校验
			return this.pattern_number.test(val);
		},
		validatorPatternPassword(val) {
			//密码校验
			return this.pattern_password.test(val);
		},
		getPasswordVisible() {
			//密码显示隐藏
			this.is_password_visible = !this.is_password_visible;
			if (this.is_password_visible === true) {
				this.password_eye = 'password';
			} else {
				this.password_eye = 'text';
			}
		},
		goForgetPassword() {
			//去忘记密码
			this.$router.push('/ForgetPassword');
		},
		goRegister() {
			//去注册
			this.$router.push('/Register');
		},
	},
};
</script>


<style lang='scss' scoped>
html,
body {
	position: relative;
	height: 100%;
	min-height: 100%;
}
.title {
	padding: 0.507246rem 0.531401rem 1.497585rem 0.797101rem;
	font-size: 0.628019rem;
}
.form {
	padding: 0 0.89372rem;

	.van-field {
		align-items: center;
		padding: 0;
		border-bottom: 1px solid #e9e9e9;
		margin-top: 1.014493rem;

		&::after {
			border-bottom: 0;
		}
	}

	.submit-button {
		margin-top: 0.966184rem;

		.van-button--round {
			height: 1.062802rem;
			background-color: #6899f4;

			.van-button__content {
				.van-button__text {
					color: white;
				}
			}
		}
	}

	.bottom-info {
		margin-top: 0.434783rem;

		.van-cell {
			padding: 0;
		}
	}

	.bottom-agreement {
		width: 100%;
		position: absolute;
		left: 50%;
		bottom: 0.628019rem;
		transform: translate(-50%, 0);
	}
}
</style>